<template>
  <pageTabelLayout>
    <template #pageTabel>
      <a-spin :loading="pageData.pageLoading" tip="加载中" dot style="height:99%;width: 100%;z-index:999 ;">
        <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
                         @grid-ready="gridReady" style="height:calc(100% - 45px)" class='ag-theme-alpine'
                         :defaultColDef="defaultColDef"
                         :rowData="table.dataList" :columnDefs="cfsValue" :localeText="localeTextData"
                         @columnResized="onColumnResized"
                         @columnMoved="onColumnMoved"></AgGridVuesCopys>
      </a-spin>
    </template>
    <!-- <paginationCopys :total="total" show-total show-jumper show-page-size @change="changePage" @page-size-change="changeSize"
        style="justify-content: center;margin-top: 10px;" :page-size="pagination.pageSize" :current="pagination.page" /> -->
    <a-drawer :drawer-style="{ zIndex: 9999 }" height="100%" unmountOnClose :visible="pageData.showEdit"
              :mask-closable="false" placement="bottom" @cancel="pageData.showEdit = false">
      <template #title>修改</template>
      <a-form size="small" :model="saveData" auto-label-width layout="inline">
        <a-form-item label-col-flex="110px" label="员工工号">
          <a-select popup-container="html" allow-clear class="bacClass" style="width: 247px;"
                    v-model="saveData.staffCode">
            <a-option value="全部">全部</a-option>
            <a-option value="开始">开始</a-option>
            <a-option value="结束">结束</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label-col-flex="110px" label="员工名称">
          <a-select popup-container="html" allow-clear class="bacClass" style="width: 247px;"
                    v-model="saveData.staffName">
            <a-option value="全部">全部</a-option>
            <a-option value="开始">开始</a-option>
            <a-option value="结束">结束</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label-col-flex="110px" label="班次">
          <a-select popup-container="html" allow-clear class="bacClass" style="width: 287px;"
                    v-model="saveData.classes">
            <a-option value="全部">全部</a-option>
            <a-option value="开始">开始</a-option>
            <a-option value="结束">结束</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label-col-flex="110px" label="班组">
          <a-select popup-container="html" allow-clear class="bacClass" style="width: 287px;" v-model="saveData.unit">
            <a-option value="全部">全部</a-option>
            <a-option value="开始">开始</a-option>
            <a-option value="结束">结束</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label-col-flex="110px" label="加料情况">
          <a-input style="width: 247px;" disabled v-model="saveData.charging"/>
          <!-- <a-select popup-container="html"  allow-clear class="bacClass" style="width: 270px;">
                      <a-option value="全部">全部</a-option>
                      <a-option value="开始">开始</a-option>
                      <a-option value="结束">结束</a-option>
                  </a-select> -->
        </a-form-item>
        <a-form-item label-col-flex="110px" label="当班日期">
          <a-input style="width: 247px;" disabled v-model="saveData.classTime"/>
        </a-form-item>
        <a-form-item label-col-flex="110px" label="漂染日期">
          <a-input style="width: 247px;" disabled v-model="saveData.bleachingTime"/>
        </a-form-item>
        <a-form-item label-col-flex="110px" label="重量">
          <a-input disabled v-model="saveData.flowCardWeight" style="width: 287px;"/>
        </a-form-item>
        <a-form-item label-col-flex="110px" label="色号">
          <a-input disabled v-model="saveData.colorCode" style="width: 287px;"/>
        </a-form-item>
        <a-form-item label-col-flex="110px" label="流转卡号">
          <a-input style="width: 247px;" disabled v-model="saveData.flowCardCode"/>
        </a-form-item>
        <a-form-item label-col-flex="110px" label="客户名称">
          <a-input style="width: 247px;" disabled v-model="saveData.customName"/>
        </a-form-item>
        <a-form-item label-col-flex="110px" label="设备编号">
          <a-input style="width: 247px;" disabled v-model="saveData.machineCode"/>
        </a-form-item>
        <a-form-item label-col-flex="110px" label="配方单类型">
          <a-input disabled v-model="saveData.formulaType" style="width: 233px;"/>
        </a-form-item>
        <a-form-item label-col-flex="110px" label="生产车间">
          <!-- <a-input class="bacClass bacClassLine"  /> -->
          <a-select popup-container="html" allow-clear class="bacClass" style="width: 247px;"
                    v-model="saveData.workshop">
            <a-option value="全部">全部</a-option>
            <a-option value="开始">开始</a-option>
            <a-option value="结束">结束</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label-col-flex="110px" label="对色师傅工号">
          <a-input class="bacClass" v-model="saveData.colorContrastStaffCode" style="width: 219px;"/>
        </a-form-item>
        <a-form-item label-col-flex="110px" label="对色师傅">
          <a-input class="bacClass" style="width: 247px;" v-model="saveData.colorContrastStaff"/>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button @click="pageData.showEdit = false">
          关闭
        </a-button>
        <a-button type="primary" @click="saveHandler">
          保存
        </a-button>
      </template>
    </a-drawer>
  </pageTabelLayout>
</template>

<script lang="ts">

import emitter from "@/hooks/useEventBus";
import {localeText} from '@/api/aggridZw'
import {onMounted, reactive, ref} from 'vue';
import {assTable} from '@/utils/assemblyLevelTable';
import {Message} from '@arco-design/web-vue';
import {usePagination, useTable} from '@/hooks/table';
import {calculate} from '@/api/DyeingshopManagement/cylinderCalculate';
import {saveOrUpdateGridState as saveOrUpdateGridState01} from '@/hooks/useGridState'

export default {
  name: 'cylinderDisInfo',
  components: {},
  props: {
    searchData: {
      type: Object,
      default: () => {
      }
    }
  },
  setup(props) {
    const table = useTable();
    const calculateApi = calculate();
    emitter.on("refresh-cylinderDisInfo", () => {
      pagination.page = 1;
      doRefresh();
    });

    const doRefresh = async () => {
      pageData.pageLoading = true;
      updateGridState01()
      await calculateApi.getCylineInfo({
        ...props.searchData
      }).then(({data, code, message}: any) => {
        if (code === 200) {
          // gridOption.value.sizeColumnsToFit();
          //   console.log(data);
          table.handleSuccess(data);
          gridOption.value.setRowData(data);
          //   total.value = data.total;
          // console.log(res.data);
        } else {
          Message.error(message)
        }
      }).catch(console.log).finally(() => {
        pageData.pageLoading = false;
      });
    };
    const saveData = reactive<{
      id: any,
      flowCardCode: string;
      companyId: number;
      department: string;
      classes: string;
      unit: string;
      workshop: string;
      staffCode: string;
      staffName: string;
      colorContrastStaff: string;
      colorContrastStaffCode: string;
      departmentCode: string;
      classTime: string;
      remark: string;
      charging: string;
      bleachingTime: string;
      flowCardWeight: string;
      colorCode: string;
      customName: string;
      machineCode: string;
      formulaType: string;
    }>({
      id: '',
      flowCardCode: '',
      companyId: 0,
      department: '',
      classes: '',
      unit: '',
      workshop: '',
      staffCode: '',
      staffName: '',
      colorContrastStaff: '',
      colorContrastStaffCode: '',
      departmentCode: '',
      classTime: '',
      remark: '',
      charging: '',
      bleachingTime: '',
      flowCardWeight: '',
      colorCode: '',
      customName: '',
      machineCode: '',
      formulaType: ''
    });
    const editHandler = (data: any) => {
      pageData.showEdit = true;
      for (let key in saveData) {
        saveData[key] = data[key];
      }
      ;
    };


    const pagination = usePagination(doRefresh);
    //表格方面
    const gridOption = ref();
    const colState = ref()
    const gridReady = (params: any) => {
      gridOption.value = params.api;
      colState.value = params.columnApi
      //调整表格自适应大小
    }
    const defaultColDef = {
      sortable: true,
      resizable: true,
      filter: true,
      width: 150
    };
    let cfsValue: any = [
      // {
      //     headerName: "序号",
      //     field: "circulatCard",
      // },
      {
        headerName: "部门编号",
        field: "departmentCode",
      },
      {
        headerName: "部门名称",
        field: "department",
      },
      {
        headerName: "当班日期",
        field: "classTime",
      },
      {
        headerName: "计划单号",
        field: "planOrderCode",
      },
      // {
      //     headerName: "下单日期",
      //     field: "circulatCard",
      // },
      {
        headerName: "流转卡号",
        field: "flowCardCode",
      },
      {
        headerName: "漂染日期",
        field: "bleachingTime",
      },
      {
        headerName: "设备编号",
        field: "machineCode",
      },
      {
        headerName: "作业类型",
        field: "dyeingType",
      },
      {
        headerName: "客户名称",
        field: "customName",
      },
      {
        headerName: "布号",
        field: "greyCode",
      },
      {
        headerName: "品名",
        field: "productName",
      },
      {
        headerName: "色号",
        field: "colorCode",
      },
      {
        headerName: "色称",
        field: "colorName",
      },
      {
        headerName: "匹数",
        field: "houseNum",
      },
      {
        headerName: "重量",
        field: "flowCardWeight",
      },
      {
        headerName: "直出",
        field: "straightOut",
      },
      {
        headerName: "电脑序号",
        field: "computerSerialNum",
      },
      {
        headerName: "设备容量",
        field: "capacity",
      },
      {
        headerName: "管型",
        field: "tubeNum",
      },
      {
        headerName: "配方单的类型",
        field: "formulaType",
      },
      {
        headerName: "对色师傅姓名",
        field: "colorContrastStaff",
      },
      {
        headerName: "生产车间",
        field: "workshop",
      },
      {
        headerName: "拼缸缸号",
        field: "togetherCode",
      },
      {
        headerName: "回修原因",
        field: "repairReason",
      },
      {
        headerName: "责任部门",
        field: "dutyDep",
      },
      {
        headerName: "退货部门",
        field: "goodsDep",
      },
      {
        headerName: "班组",
        field: "unit",
        lockPosition: 'right',
        pinned: 'right',
      },
      {
        headerName: "班次",
        field: "classes",
        lockPosition: 'right',
        pinned: 'right',
      },
      {
        headerName: "员工工号",
        field: "staffCode",
        lockPosition: 'right',
        pinned: 'right',
      },
      {
        headerName: "员工姓名",
        field: "staffName",
        lockPosition: 'right',
        pinned: 'right',
      },
      {
        headerName: "加料情况",
        field: "charging",
        lockPosition: 'right',
        pinned: 'right',
      },
      {
        headerName: '操作',
        field: 'action',
        resizable: false,
        filter: false,
        sortable: false,
        lockPosition: 'right',
        width: '100',
        pinned: 'right',
        cellRenderer: {
          template: `
            <a-tag color="#eec216" @click="a" class="gesture">修改</a-tag>
          `,
          setup(props: any) {
            const a = () => {
              editHandler(props.params.data);
            };

            return {
              a,
            }
          }
        }
      },
    ];

    let a = [{
      showRowGroup: 'hide_def',
      "headerName": "",
      "checkboxSelection": true,
      "headerCheckboxSelection": true,
      "pinned": "left",
      "width": 50,
      resizable: false,
      filter: false,
      sortable: false,
      minWidth: 50,
      maxWidth: 50,
      lockPosition: "left",
    }]
    cfsValue = a.concat(cfsValue);
    const total = ref(10);
    const changePage = (val: any) => {
      pagination.page = val
      doRefresh();
    }
    const changeSize = (val: any) => {
      pagination.pageSize = val
      doRefresh();
    }

    const localeTextData: any = ref(localeText);
    emitter.on('export-cylinderDisInfo', () => {
      let selectList = gridOption.value.getSelectedRows();
      if (selectList.length === 0) {
        Message.error('请勾选需要导出的数据')
        return
      } else {
        //导出数据
        console.log(selectList);
        // let nowRow = table.dataList.filter(function (o) {
        //     return (selectList.map((o: any) => { return o.id })).indexOf(o["id"]) !== -1;
        // })
        assTable(cfsValue, selectList, '出缸核算-出缸信息');
        Message.success('数据导出成功');
      }
    });
    const pageData = reactive<{
      showEdit: boolean,
      showOver: boolean,
      pageLoading: boolean,
    }>({
      showEdit: false,
      showOver: false,
      pageLoading: false,
    });
    const saveHandler = async () => {
      await calculateApi.updateCylineInfo([{...saveData}]).then((res: any) => {
        if (res.code === 200) {
          // formRef.value?.resetFields();
          pageData.showEdit = false;
          Message.success({
            content: "修改成功",
            duration: 5000,
          });
          doRefresh();
        } else {
          Message.error({
            content: res.message,
            duration: 5000,
          });
        }

      }).catch((res) => {
        console.log(res);
      });
    };
    const {saveGridState: saveGridState01, updateGridState: updateGridState01} = saveOrUpdateGridState01('CylinderDisInfo001', gridOption, colState, cfsValue)
    const onColumnMoved = () => {
      saveGridState01()
    }
    const onColumnResized = () => {
      saveGridState01()
    }
    return {
      saveOrUpdateGridState01,
      saveGridState01,
      updateGridState01,
      onColumnMoved,
      onColumnResized,
      colState,
      pagination,
      table,
      localeTextData,
      changePage,
      changeSize,
      total,
      cfsValue,
      defaultColDef,
      gridReady,
      pageData,
      saveHandler,
      saveData
    }
  }
}
</script>

<style lang="less" scoped>
.bacClassLine {
  border: 1px solid #c9cdd3;
  background: #fff;
}

.bacClass {
  color: #000 !important;
  width: 270px;

}

:deep(.arco-input-wrapper .arco-input[disabled]) {
  -webkit-text-fill-color: #000 !important;
}
</style>